<template lang="pug">
.cp-pur-order-list
  el-dialog.ml-dialog(
    :title="title",
    :visible="visible",
    @close="closeDialog",
    width="70%")
    //- 查询
    el-form.pe-search(:inline="true")
      el-form-item
        el-select(v-model="orderDateType", placeholder="请选择", style="width: 108px")
          el-option(key="0", label="创建时间", :value="0")
          el-option(key="1", label="提交时间", :value="1")
          el-option(key="2", label="审批时间", :value="2")
      el-form-item
        el-date-picker(
          v-model="orderDate"
          type="daterange"
          style="width: 256px"
          start-placeholder="开始日期"
          end-placeholder="结束日期")
      el-form-item(label="供应商 : ")
        el-select(v-model="orderSupply", placeholder="请选择", style="width: 120px")
          el-option(
            v-for="item in supplySelectAll",
            :key="item.value",
            :label="item.name",
            :value="item.value")
      el-form-item(label="创建人 : ")
        el-select(v-model="orderCreator", placeholder="请选择", style="width: 120px")
          el-option(
            v-for="item in empSelectAll",
            :key="item.value",
            :label="item.name",
            :value="item.value")
      el-button(type="primary", @click="searchOrders") 搜索
      el-button(type="primary", @click="resetSearch", plain) 重置
    //- 列表
    .pe-table
      el-table(
        :data="purorders",
        highlight-current-row,
        height="398px",
        size="mini",
        @current-change="handleCurrentChange",
        @row-dblclick="handleOrderRowDbClick",
        v-loading="loadingOrders")
        el-table-column(align="center", label="采购单号")
          template(slot-scope="scope")
            el-tooltip(
              effect="dark"
              placement="top"
              :content="scope.row.order")
              div.cell.el-tooltip(style="padding: 0") {{scope.row.order}}
        el-table-column(align="center", show-overflow-tooltip, prop="status", label="状态")
          template(slot-scope="scope")
            span {{ scope.row.status | compare-list(statusSelectAll) }}
        el-table-column(align="center", show-overflow-tooltip, prop="supply", label="供应商")
          template(slot-scope="scope")
            span {{ scope.row.supply | compare-list(supplySelect) }}
        el-table-column(align="center", show-overflow-tooltip, prop="creator", label="创建人")
          template(slot-scope="scope")
            span {{ scope.row.creator | compare-list(empSelect) }}
        el-table-column(align="center", show-overflow-tooltip, prop="createTime", label="创建时间")
          template(slot-scope="scope")
            span {{ scope.row.createTime | date-format }}
        el-table-column(align="center", show-overflow-tooltip, prop="approveTime", label="批准时间")
          template(slot-scope="scope")
            span {{ scope.row.approveTime | date-format }}
        el-table-column(align="center", show-overflow-tooltip, prop="orderTime", label="下单时间")
          template(slot-scope="scope")
            span {{ scope.row.orderTime | date-format }}
        el-table-column(align="center", show-overflow-tooltip, prop="stateTime", label="结单时间")
          template(slot-scope="scope")
            span {{ scope.row.stateTime | date-format }}
        el-table-column(align="center", show-overflow-tooltip, prop="comment", label="备注")
    //- 分页
    el-pagination.pe-pagination(
      layout="total, prev, pager, next, jumper",
      @current-change="changeOrderPage",
      :current-page.sync="currentPage",
      :page-size="10",
      :background="true",
      :total="purordersTotal")
    div(slot="footer", style="text-align: center;")
      el-button(type="primary", plain, @click="closeDialog", v-text="'取消'")
      el-button(type="primary", style="margin-left: 40px;", @click="emitData", v-text="'确定'")
</template>

<script>
import { mapGetters } from 'vuex';
import ComApi from '@/api/common';
import PurApi from '@/api/purchase';

export default {
  name: 'purorderlist',
  props: {
    title: {
      type: String,
      default: '选择采购订单'
    },
    visible: Boolean
  },
  data() {
    return {
      // 搜索条件
      orderDateType: 0,
      orderDate: [],
      orderStatus: '6', // 已采购状态
      orderSupply: null,
      orderCreator: null,
      // 表格
      purorders: [],
      purordersTotal: 1,
      loadingOrders: true,
      currentPage: 1,
      statusSelectAll: [],
      currentRow: null
    };
  },
  computed: {
    ...mapGetters(['empSelect', 'empSelectAll', 'supplySelect', 'supplySelectAll', 'employeeId'])
  },
  methods: {
    closeDialog () {
      this.$emit('close');
    },
    resetSearch () {
      this.orderDateType = 0;
      this.orderDate = [];
      this.orderSupply = null;
      this.orderCreator = null;
      this.$message.success('重置成功');
    },
    makeParams () {
      const params = {};
      params.pageNum = this.currentPage;
      params.status = this.orderStatus;
      const dates = this.orderDate.map(date => date.valueOf());
      const datePros = [
        ['startCreationTime', 'endCreationTime'],
        ['startSubmissionTime', 'endSubmissionTime'],
        ['startApprovalTime', 'endApprovalTime']
      ];
      if (dates.length) {
        params[datePros[this.orderDateType][0]] = dates[0];
        params[datePros[this.orderDateType][1]] = dates[1];
      }
      if (this.orderSupply) {
        params.supply = this.orderSupply;
      }
      if (this.orderCreator) {
        params.creator = this.orderCreator;
      }
      return params;
    },
    // 获取列表数据
    getOrderList () {
      const params = this.makeParams();
      this.loadingOrders = true;
      PurApi.getPurchaseOrder(params).then((result) => {
        if (!result.status) {
          this.purorders = result.obj.records;
          this.purordersTotal = result.obj.totalNum;
        } else {
          this.purorders = [];
          this.purordersTotal = 1;
        }
        this.loadingOrders = false;
      }).catch((error) => {
        this.loadingOrders = false;
        console.log(JSON.stringify(error));
      });
    },
    // 搜索
    searchOrders () {
      if (this.currentPage !== 1) {
        this.currentPage = 1;
      }
      this.getOrderList();
    },
    // 监听Order列表事件
    handleOrderRowDbClick (row) {
      this.currentRow = row;
      this.emitData();
    },
    // 监听选择行
    handleCurrentChange (row) {
      this.currentRow = row;
    },
    // 确定选择
    emitData () {
      if (this.currentRow) {
        this.$emit('submit', this.currentRow);
      } else {
        this.$message({ type: 'info', message: '请选择采购订单' });
      }
    },
    // 监听翻页
    changeOrderPage (currentPage) {
      this.currentPage = currentPage;
      this.getOrderList();
    }
  },
  created () {
    // 状态列表
    ComApi.getStatus({ orderType: 'procurementorder' }).then((statusList) => {
      this.statusSelectAll = [{ name: '全部', value: null }].concat(statusList);
    });
  },
  mounted () {
    this.getOrderList();
  }
};
</script>

<style lang="sass">
.cp-pur-order-list
  .ml-dialog
    &::-webkit-scrollbar
      display: none
    .el-dialog
      margin-top: 5vh!important
    .el-dialog__body
      padding: 16px
    .el-dialog__footer
      text-align: center
      padding-top: 0
      .el-button
        width: 80px
  .pe-search
    .el-date-editor .el-range__close-icon
      width: 20px
  .pe-table
    margin-bottom: 12px
    table
      &::before
        display: none
      .icon-act
        font-size: 16px
        margin-left: 3px
        margin-right: 3px
      th.gutter
        display: table-cell!important
  .pe-pagination
    text-align: center
</style>
